<template>
	<view class="box fu" :style="{height:screenHeight+'px'}">
		<view class="dizhi" @click="open">
			<view class="left">
				<view class="ts" v-show="!dizhipanduan">请选择收货地址!</view>
				<view class="ts" v-show="dizhipanduan">
					{{dizhis.province}}{{dizhis.city}}{{dizhis.county}}{{dizhis.address}}</view>
				<view class="text" v-show="dizhipanduan">{{dizhis.userName}} {{dizhis.userPhone}}</view>
			</view>
			<view class="right">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="shangpin">
			<view class="left">
				<image :src="shangp.productImage" mode=""></image>
			</view>
			<view class="right">
				<span>{{shangp.productName}}</span>
				<p><a>￥</a>{{shangp.productPriceShow}}</p>
			</view>
		</view>
		<view class="num">
			<span>数量</span>
			<uni-number-box :min="1" v-model="num" @change="changeValue" />
		</view>
		<view class="pay" v-if="zhanghuyue">
			<view class="hezi" @click="payxz(1)">
				<view class="left">
					<image src="../../static/ddimg/p1.png" mode=""></image>
					<span>微信支付</span>
				</view>
				<view class="right">
					<image :src="huanimg?'../../static/ddimg/p2.png':'../../static/ddimg/p4.png'" mode=""></image>
				</view>
			</view>
			<view class="hezi" @click="payxz(2)" style="border: none;">
				<view class="left">
					<image src="../../static/ddimg/p3.png" mode=""></image>
					<span>余额支付</span>
					<p>当前余额￥{{allprice}}</p>
				</view>
				<view class="right">
					<image :src="huanimg?'../../static/ddimg/p4.png':'../../static/ddimg/p2.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="dibu queding">
			<view class="left">
				<span>共{{num}}件,合计:</span>
				<p><a>￥</a>{{num*shangp.productPriceShow}}</p>
			</view>
			<view>
				<button @click="submit">确定支付</button>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area='false'>
			<view class="tanchu">
				<view class="top">
					<view class="wenzi">
						<span style="margin-right: -10%;">配送至</span>
					</view>
					<uni-icons @click="close()" type="closeempty" size="20"></uni-icons>
				</view>

				<scroll-view scroll-y="true" style="overflow: scroll;height: 420rpx;">
					<view class="hezi" v-for="(item,index) in dizhilist" :key="index" @click="xuanzedizhi(index)">
						<view class="left">
							<image :src="indexs == index?'../../static/ddimg/d3.png':'../../static/ddimg/d2.png'"
								mode="">
							</image>
							<view>
								<span>{{item.province}}{{item.city}}{{item.county}}{{item.address}}</span>
								<p>{{item.userName}} {{item.userPhone}}</p>
							</view>
						</view>
					</view>
				</scroll-view>

				<button @click="dizi()">创建新地址</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getdelivery,
		openiddelivery,
		adddeliverys,
		getwallet
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				value: 0,
				screenHeight: "",
				num: 1,
				huanimg: false,
				zhanghuyue: false,
				shangp: [],
				payfangshi: 1,
				indexs: -1,
				dizhilist: [],
				dizhipanduan: false,
				dizhis: {},
				paytype: 1,
				opens: '',
				allprice: 0
			}
		},
		onLoad(options) {
			this.shangp = JSON.parse(decodeURIComponent(options.data));
			console.log(this.shangp);
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
			let user = uni.getStorageSync('name')
			if (user == 1) {
				this.zhanghuyue = true
			} else {
				this.zhanghuyue = false
			}
			getwallet().then(res => {
				this.allprice = res.data.amount
			})
		},
		methods: {
			payxz(index) {
				this.paytype = index
				this.payfangshi = index
				this.huanimg = !this.huanimg
			},
			changeValue() {
				console.log(this.num);
			},
			open() {
				let data = {}
				getdelivery(data).then(res => {
					this.dizhilist = res.data
				})
				this.$refs.popup.open('bottom')
			},
			dizi() {
				uni.navigateTo({
					url: "/pages/dizhi/dizhilist"
				})
			},
			close() {
				this.$refs.popup.close('bottom')
			},
			xuanzedizhi(index) {
				this.dizhis = this.dizhilist[index]
				this.indexs = index
				this.$refs.popup.close('bottom')
				this.dizhipanduan = true
			},
			submit() {
				if (this.dizhis.userName == undefined) {
					uni.showToast({
						title: '请先选择地址',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				} else {
					let that = this
					if (that.paytype == 1) {
						uni.login({
							provider: 'weixin', //使用微信登录
							success: function(loginRes) {
								let asb = {
									code: loginRes.code
								}
								openiddelivery(asb).then(res => {
									that.opens = res.data.openid
									setTimeout(() => {
										let arr = {
											productId: that.shangp.id,
											productCount: that.num,
											payType: that.paytype,
											openId: that.opens,
											deliveryRecipientName: that.dizhis.userName,
											deliveryRecipientPhone: that.dizhis.userPhone,
											deliveryProvince: that.dizhis.province,
											deliveryCity: that.dizhis.city,
											deliveryCounty: that.dizhis.county,
											deliveryAddress: that.dizhis.address
										}
										adddeliverys(arr).then(res => {
											uni.requestPayment({
												provider: 'wxpay', // 服务提提供商
												appid: res.data.payment.appId,
												timeStamp: res.data.payment
													.timestamp, // 时间戳
												nonceStr: res.data.payment
													.nonceStr, // 随机字符串
												package: res.data.payment.packageVal,
												signType: res.data.payment
													.signType, // 签名算法
												paySign: res.data.payment.paySign, // 签名
												success: function(res) {
													uni.showToast({
														title: '支付成功',
														duration: 2000,
														mask: false,
														icon: "none"
													})
													setTimeout(() => {
														uni.navigateTo({
															url: 'pages/dingdan/dingdanlist'
														})
													}, 500)
									
												},
												fail: function(err) {
													console.log('支付失败', err);
												}
											});
										})
									}, 300)
								})
							}
						});
					} else {
						let arr = {
							productId: that.shangp.id,
							productCount: that.num,
							payType: that.paytype,
							deliveryRecipientName: that.dizhis.userName,
							deliveryRecipientPhone: that.dizhis.userPhone,
							deliveryProvince: that.dizhis.province,
							deliveryCity: that.dizhis.city,
							deliveryCounty: that.dizhis.county,
							deliveryAddress: that.dizhis.address
						}
						adddeliverys(arr).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '购买成功',
									duration: 2000,
									mask: false,
									icon: "none"
								})
							}
						})
					}

				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.pay {
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 20rpx;

		.hezi {
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #EEEEEE;

			.left {
				display: flex;
				align-items: center;

				span {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 40rpx;
					margin: 0rpx 10rpx;
				}

				p {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF9F15;
					line-height: 40rpx;
				}
			}

			image {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}

	.tanchu {
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 640rpx;

		button {
			width: 680rpx;
			height: 80rpx;
			background: linear-gradient(84deg, #24180D 0%, #594629 100%);
			border-radius: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 33rpx;
			position: absolute;
			bottom: 60rpx;
			left: 35rpx;
		}

		.hezi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.left {
				display: flex;
				align-items: center;

				span {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #070707;
					line-height: 33rpx;
				}

				p {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7C7C7C;
					line-height: 33rpx;
					margin-top: 10rpx;
				}

				image {
					margin-left: 25rpx;
					margin-right: 20rpx;
				}
			}

			.right {
				margin-right: 20rpx;
			}

			image {
				width: 35rpx;
				height: 35rpx;
			}
		}

		.top {
			width: 100%;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			align-items: center;

			.wenzi {
				width: 90%;
				height: 100rpx;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #070707;
				line-height: 100rpx;
				// margin-left: -10%;
			}
		}
	}

	.dibu {
		position: absolute;
		bottom: 0
	}

	.fu {
		position: relative;
	}

	.queding {
		width: 710rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;

		button {
			width: 221rpx;
			height: 67rpx;
			background: linear-gradient(42deg, #5A4629 0%, #21150A 53%, #302315 100%);
			border-radius: 33rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #E4C085;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.left {
			display: flex;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #131313;
			align-items: center;

			p {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #BC7E13;

				a {
					font-size: 20rpx;
				}
			}
		}
	}

	.num {
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx;
		margin-top: 50rpx;
		justify-content: space-between;

		input {
			border: none !important;
		}
	}

	.shangpin {
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx;
		margin-top: 40rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 175rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #191919;
			margin-left: 20rpx;

			a {
				font-size: 28rpx;
			}
		}
	}

	.dizhi {
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;

		.left {
			.ts {
				font-family: PingFang SC;
				font-size: 30rpx;
				color: #1F1F1F;
				line-height: 33rpx;
			}

			.text {
				margin-top: 10rpx;
				font-family: PingFang SC;
				font-size: 26rpx;
				color: #7C7C7C;
				line-height: 33rpx;
			}
		}
	}
</style>